<template>
    <div class="formCell" :style="'background-color:'+bgColor+';'">
        <div class="leftSlot">
            <div v-if="important" class="starSign">*</div>
            <div class="word">{{title}}</div>
            <i v-if="headIcon" class="cubeic-warn warn-icon"></i>
        </div>
        <div class="rightSlot">
            <div v-if="type&&!moreSelected" class="selectWay" @click="showPicker">
                <div class="word">{{value}}</div>
                <i v-if="selected" class="cubeic-arrow arrow-icon"></i>
            </div>
            <div v-if="type&&moreSelected" class="selectWay" @click="showCascadePicker">
                <div class="word">{{value}}</div>
                <i v-if="selected" class="cubeic-arrow arrow-icon"></i>
            </div>
            <div v-if="typeInput" class="inputWay">
                <cube-input :class="{placeholderColor:inputClass}" :type="inputType" :placeholder="placeholder.toString()" @input="changeValue($event)" ref="input">{{value}}</cube-input>
            </div>
        </div>
    </div>
</template>

<script>
    import {showError} from "@/toast"
    export default {
        name : "index",
        props:{
            title:String,
            headIcon: {
                type:Boolean,
                default:false
            },
            important:{
                type : Boolean,
                default : false
            },
            type:{
                type:Boolean,
                default: false
            },
            value: {
                type:String|Number|Boolean,
            },
            selected:{
                type:Boolean,
                default:false
            },
            placeholder:{
                type:String|Number|Boolean
            },
            typeInput:{
                type:Boolean,
                default : false
            },
            bgColor:{
                type:String,
                default:'#fff'
            },
            list: {
                type:Array
            },
            isPicker:{
                type:Boolean,
                default:true
            },
            moreSelected:{
                type:Boolean,
                default:false
            },
            cascadeData:{
                type:Array
            },
            inputType:{
                type:String,
                default:'text'
            },
            inputClass:Boolean
        },
        methods: {
            showCascadePicker(){
                if (!this.cascadePicker&&this.type){
                    this.cascadePicker = this.$createCascadePicker({
                        title: this.title,
                        data: this.cascadeData,
                        selectedIndex: [0, 0],
                        onSelect: this.selectHandle,
                        onCancel: this.cancelHandle
                    })
                }
                this.cascadePicker.show()
            },
            showPicker() {
                if(!this.isPicker)return
                if (!this.picker&&this.type!==false) {
                    this.picker = this.$createPicker({
                        title: this.title,
                        data: [this.list],
                        onSelect: this.selectHandle,
                        onCancel: this.cancelHandle
                    })
                }
                this.picker.show()
            },
            selectHandle(selectedVal, selectedIndex, selectedText) {
                this.$emit('input',selectedText.join('/'))
                this.$emit('getIndex',selectedIndex)
                // this.$createDialog({
                //     type: 'warn',
                //     content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
                //     icon: 'cubeic-alert'
                // }).show()
            },
            cancelHandle() {
                // this.$createToast({
                //     type: 'correct',
                //     txt: 'Picker canceled',
                //     time: 1000
                // }).show()
            },
            changeValue(e){
                this.$emit('input',e)
            },
            onBlur(e){
                if (this.important&&this.typeInput){
                    if (!this.placeholder||!e.target.value){
                        showError(this.title+'不能为空！')
                    }

                    // this.$refs.input.focus()
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
.formCell
    padding 0.33rem 0.40rem 0.40rem 0.47rem
    height 0.37rem
    display flex
    justify-content space-between
    align-items center
    border-bottom 1px solid #EAECEC
    .leftSlot
        font-size 0.40rem
        display flex
        justify-content center
        .word
            color #333333
        .warn-icon
            color #00A398
        .starSign
            font-size 0.29rem
            color #00A398
            display flex
            align-items center
    .rightSlot
        .selectWay
            font-size 0.35rem
            display flex
            justify-content center
        .word
            color #666666
            margin-right 0.21rem
        .arrow-icon
            padding-top 0.03rem
/deep/.placeholderColor
    input::-webkit-input-placeholder
        color: #333333;
    input::-webkit-input-placeholder
        color: #333333;

    input:-moz-placeholder /* Firefox 18- */
        color: #333333;

    input::-moz-placeholder/* Firefox 19+ */
        color: #333;

    input:-ms-input-placeholder
        color: #333;

/deep/.cube-input
    border none
    input
        text-align right
.cube-input_active::after
    border none
.cube-input::after
    border none
</style>